<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>美多商城-用户中心</title>
    <link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}">
    <script type="text/javascript" src="../static/js/host.js"></script>
	<script type="text/javascript" src="{{ static('js/vue-2.5.16.js') }}"></script>
    <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js') }}"></script>
        <script type="text/javascript" src="{{ static('js/common.js') }}"></script>
    <script>
        window.onload = function() {
            let vm = new Vue({
                el:'.nice',
                data:{
                    skus:[],
                    username:'{{ username }}',
                    mobile:'{{ mobile }}',
                    email:'{{ email }}',
                    email_active:'{{ email_active }}',
                    error_email:false,
                    error_email_message:'',
                    yanzheng:false,
                    yanzheng_tip :'等待验证',
                },
                methods:{
                    check_email(){
                        let de = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/;
                        if (de.test(this.email)){
                            this.error_email =false
                        }else {
                            this.error_email =true;
                            this.error_email_message='邮箱格式错误'
                        }
                    },
                    save_email(){
                        //用axios来做
                        this.check_email();
                        if (this.error_mail == true){
                            return
                        }else {
                            //有填写正确格式的邮箱
                            this.yanzheng =true;
                            let url = '/email/' + this.email +'/';
                            axios.get(url,{responseType:'json'}).then(response=>{
                                if (response.data.code == '0'){
                                    alert(response.data.errmsg)
                                }else if (response.data.code == '-1'){
                                    this.error_email_message=response.data.errmsg
                                }else if (response.data.code == '-2'){
                                    this.error_email_message=response.data.errmsg
                                }
                            }).catch()
                        }
                    },
                    get_browse_histories(){
                        let url = '/browse_histories/';
                        axios.get(url,{responseType:'json'}).then(response=>{
                            this.skus =response.data.skus
                        }).catch()
                    }
                },

                delimiters:['[[',']]'],
                mounted(){
                    this.get_browse_histories()
                }
            })
        }

    </script>
</head>
<body>
    <div class="nice">
        <div id="app" v-cloak>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到美多商城!</div>
			<div class="fr">
				<div v-if="username" class="login_btn fl">
					欢迎您：<em>[[username]]</em>
                    <span>|</span>
					<a href="/register/">注册</a>
				</div>
				<div v-else class="login_btn fl">
					<a href="/login/">登录</a>
					<span>|</span>
					<a href="/register/">注册</a>
				</div>
				<div class="user_link fl">
					<span>|</span>
					<a href="/usercenter/">用户中心</a>
					<span>|</span>
					<a href="/carts/">我的购物车</a>
					<span>|</span>
					<a href="/mypayment/">我的订单</a>
				</div>
			</div>
		</div>
	</div>

	<div class="search_bar clearfix">
		<a href="{{ url('index') }}" class="logo fl"><img src="{{ static('images/logo.png')}}"></a>
		<div class="search_wrap fl">
			<form method="get" action="/search/" class="search_con">
                <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                <input type="submit" class="input_btn fr" name="" value="搜索">
            </form>
			<ul class="search_suggest fl">
				<li><a href="#">索尼微单</a></li>
				<li><a href="#">优惠15元</a></li>
				<li><a href="#">美妆个护</a></li>
				<li><a href="#">买2免1</a></li>
			</ul>
		</div>
	</div>

	<div class="main_con clearfix">
		<div class="left_menu_con clearfix">
			<h3>用户中心</h3>
			<ul>
				<li><a href="/usercenter/" class="active">· 个人信息</a></li>
				<li><a href="/mypayment/">· 全部订单</a></li>
				<li><a href="/address/">· 收货地址</a></li>
				<li><a href="/password/">· 修改密码</a></li>
			</ul>
		</div>
		<div class="right_content clearfix">
				<div class="info_con clearfix">
					<h3 class="common_title2">基本信息</h3>
					<ul class="user_info_list">
						<li><span>用户名：</span>[[username]]</li>
						<li><span>联系方式：</span>[[mobile]]</li>
						<li>
	                    <span>Email：</span>
	                    <input type="text" name="email" class="email" v-model="email" @blur="check_email">
	                    <input type="button" @click="save_email" name="" value="保 存">
	                    <input type="reset"  name="" value="取 消">
                        <div v-show="error_email">[[ error_email_message ]] </div>
                        <div v-show="yanzheng">[[yanzheng_tip]]</div>
	                	</li>
					</ul>
				</div>

				<h3 class="common_title2">最近浏览</h3>
				<div class="has_view_list">
					<ul class="goods_type_list clearfix">

				<li v-for="sku in skus">
					<a href="/detail/"><img :src="sku.default_image_url"></a>
					<h4><a href="/detail/">[[sku.name]]</a></h4>
					<div class="operate">
						<span class="price">￥[[sku.price]]</span>
						<span class="unit">台</span>
						<a href="#" class="add_goods" title="加入购物车"></a>
					</div>
				</li>
			</ul>
		</div>
		</div>
	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	</div>

    </div>
<script type="text/javascript" src="../static/js/common.js"></script>
{#	<script type="text/javascript" src="js/user_center_info.js"></script>#}
</body>
</html>